import { t } from 'i18next'
import React, { useState, useEffect, forwardRef } from 'react'
import { MeetingInfo } from '../interfaces/meeting'
import { PopupWinStyle } from './style/popupWin'
import { fetchGetSimpleMccInfo } from '@/api/index'
import { transSimpleMccInfo } from '@/api/index/translator'
import { CopyIcon } from '@/pages/sysLog/components/LogDetailModal/style'
import { useGlobalStore } from '@/store/global'
/*
组件使用
<Trigger
	popup={<PopupMeetingWin meetingMoid={props.entity.meetingMoid} />}
	...
>
	<span className="link-btn">{t('详情')}</span>
</Trigger>

详情 hover的弹窗
*/
const PopupWin = forwardRef((props: any, ref: any) => {
	/*
	export class MeetingInfo {
		subject: string
		vmrName: string
		beginTime: string
		endTime: string
		duration: string
		e164: string
		onlineNum: number
		totalNum: number
		meetingRate: string
		meetingResolution: string
		cloudMode: number
		cloudModelType: number
		encryptionType: number
		doubleFlowLimit: string
		liveUrl: string
		confType: number
		superMtNum: number
		createdBy: any
		meetingResourceVO: MeetingResourceVO
		constructor() {
			this.subject = ''
			this.vmrName = ''
			this.beginTime = ''
			this.endTime = ''
			this.duration = ''
			this.e164 = ''
			this.onlineNum = 0
			this.totalNum = 0
			this.meetingRate = ''
			this.meetingResolution = ''
			this.cloudMode = 0
			this.confType = 0
			this.cloudModelType = 0
			this.encryptionType = 0
			this.doubleFlowLimit = ''
			this.liveUrl = ''
			this.superMtNum = 0
			this.createdBy = {
				name: '',
			}
			this.meetingResourceVO = new MeetingResourceVO()
		}
	}
	*/
	const [meetingInfo, setMeetingInfo] = useState(new MeetingInfo())
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	/*
	fetchGetSimpleMccInfo 接口请求

	transSimpleMccInfo  接口返回的数据，进行整理
	*/
	useEffect(() => {
		fetchGetSimpleMccInfo(props.meetingMoid).then((data) => {
			data && setMeetingInfo(transSimpleMccInfo(data))
		})
	}, [props.meetingMoid])
	/*
	getConfTypeStr 会议类型
	*/
	const getConfTypeStr = (confType: number) => {
		var confTypeStr = ''
		if (confType == 1) {
			confTypeStr = t('端口会议')
		} else if (confType == 0) {
			confTypeStr = t('传统会议')
		} else if (confType == 2) {
			confTypeStr = t('超元RTC会议')
		} else if (confType == 3) {
			confTypeStr = t('混合会议')
		}
		return confTypeStr
	}
	const getCloudModelTypeStr = (cloudModelType: number) => {
		var cloudModelTypeStr = ''
		if (cloudModelType == 1) {
			cloudModelTypeStr = t('召开在私有云平台')
		} else {
			cloudModelTypeStr = t('召开在公有云平台')
		}
		return cloudModelTypeStr
	}
	/*
	getEncryptionTypeStr 加密方式
	*/
	const getEncryptionTypeStr = (type: number) => {
		var showText = ''
		if (type == 0) {
			//1 加密   0 不加密
			showText = t('不加密')
		} else if (type == 2) {
			showText = t('AES加密')
		} else if (type == 3 || type == 4) {
			showText = t('国密加密')
		} else if (type == 5 || type == 6) {
			showText = t('量通加密')
		}
		return showText
	}
	/*
	getDoubleFlowLimitStr 内容共享权限
	*/
	const getDoubleFlowLimitStr = (type: string) => {
		var showText = ''
		if (type == '0') {
			//0: "发言会场"  1: "任意会场"  2: "指定会场"
			showText = t('发言会场')
		} else if (type == '1') {
			showText = t('任意会场')
		} else if (type == '2') {
			showText = t('指定会场')
		}
		return showText
	}
	/*
	getDurationRender  会议时长

	分钟转 X天X小时X分钟
	*/
	const getDurationRender = (_duration: string) => {
		var res = '',
			n = 0
		var duration = parseInt(_duration)
		let day = 0,
			hour = 0,
			minute = 0
		if (!isNaN(duration)) {
			n = parseInt(_duration)
			if (n == 0) {
				res = t('手动结束')
			} else {
				if (n > 60 * 24) {
					day = parseInt('' + n / (60 * 24))
					n = n % (60 * 24)
				}
				if (n > 60) {
					hour = parseInt('' + n / 60)
					n = n % 60
				}
				if (n > 0) {
					minute = n
				}
				if (day) {
					if (hour) {
						if (minute) {
							res = t('{{day}}天{{hour}}小时{{minute}}分钟', { day: day, hour: hour, minute: minute })
						} else {
							res = t('{{day}}天{{hour}}小时', { day: day, hour: hour })
						}
					} else {
						if (minute) {
							res = t('{{day}}天{{minute}}分钟', { day: day, hour: hour, minute: minute })
						} else {
							res = t('{{day}}天', { day: day })
						}
					}
				} else {
					if (hour) {
						if (minute) {
							res = t('{{hour}}小时{{minute}}分钟', { hour: hour, minute: minute })
						} else {
							res = t('{{hour}}小时', { hour: hour })
						}
					} else {
						res = t('{{minute}}分钟', { minute: minute })
					}
				}
			}
		}
		return res
	}
	/*
	handelCopyUrl 复制直播地址
	*/
	const handelCopyUrl = (url: string) => {
		var textarea = document.createElement('textarea')
		document.body.appendChild(textarea)
		// 隐藏此输入框
		textarea.style.position = 'fixed'
		textarea.style.clip = 'rect(0 0 0 0)'
		textarea.style.top = '10px'
		// 赋值
		textarea.value = url
		// 选中
		textarea.select()
		// 复制
		document.execCommand('copy', true)
		// 移除输入框
		document.body.removeChild(textarea)
	}
	return (
		<PopupWinStyle ref={ref} {...props}>
			<div className="title">{meetingInfo.subject}</div>
			<div className="content">
				<div className="line">
					<div className="line-left">{t('会议规模')}</div>
					<div className="line-right">
						{meetingInfo.superMtNum !== undefined && meetingInfo.superMtNum > 0 ? (
							<span style={{ paddingRight: '4px' }}>{t('超大方')}</span>
						) : (
							<span style={{ paddingRight: '4px' }}>{meetingInfo.meetingResourceVO.name}</span>
						)}
					</div>
				</div>
				{meetingInfo.vmrName.length > 0 && (
					<div className="line">
						<div className="line-left">{t('虚拟会议室')}</div>
						<div className="line-right">{meetingInfo.vmrName}</div>
					</div>
				)}
				<div className="line">
					<div className="line-left">{t('会议时间')}</div>
					<div className="line-right">
						{meetingInfo.beginTime}~{parseInt(meetingInfo.duration) === 0 ? '' : meetingInfo.endTime}
					</div>
				</div>
				<div className="line">
					<div className="line-left">{t('会议时长')}</div>
					<div className="line-right">{getDurationRender(meetingInfo.duration)}</div>
				</div>
				<div className="line">
					<div className="line-left">{t('发起人')}</div>
					<div className="line-right">{meetingInfo.createdBy.name}</div>
				</div>
				<div className="line">
					<div className="line-left">{t('会议号码')}</div>
					<div className="line-right">{meetingInfo.e164}</div>
				</div>
				<div className="line">
					<div className="line-left">{t('在线数/与会总数')}</div>
					<div className="line-right">
						{meetingInfo.onlineNum}/{meetingInfo.totalNum}
					</div>
				</div>
				<div className="line">
					<div className="line-left">{t('会议码率')}</div>
					<div className="line-right">{meetingInfo.meetingRate}</div>
				</div>
				<div className="line">
					<div className="line-left">{t('会议分辨率')}</div>
					<div className="line-right">{meetingInfo.meetingResolution}</div>
				</div>
				{!!SWITCH.showMeetingType && (
					<div className="line">
						<div className="line-left">{t('会议类型')}</div>
						<div className="line-right">{getConfTypeStr(meetingInfo.confType)}</div>
					</div>
				)}
				{/* <div className="line">
					<div className="line-left">{t('会议平台')}</div>
					<div className="line-right">{getCloudModelTypeStr(meetingInfo.cloudModelType)}</div>
				</div> */}
				<div className="line">
					<div className="line-left">{t('加密方式')}</div>
					<div className="line-right">{getEncryptionTypeStr(meetingInfo.encryptionType)}</div>
				</div>
				<div className="line">
					<div className="line-left">{t('内容共享权限')}</div>
					<div className="line-right">{getDoubleFlowLimitStr(meetingInfo.doubleFlowLimit)}</div>
				</div>
				{meetingInfo.liveUrl !== '' && (
					<div className="line">
						<div className="line-left">{t('会议直播')}</div>
						<div className="line-right live">
							<span className="live-url">{meetingInfo.liveUrl}</span>
							<CopyIcon
								className="live-url-copy"
								title={t('复制直播地址')}
								onClick={() => {
									handelCopyUrl(meetingInfo.liveUrl)
								}}
							/>
						</div>
					</div>
				)}
			</div>
		</PopupWinStyle>
	)
})
export default PopupWin
